<template>
  <div v-if="myGoodsList.length!=0"
       id="outerBox">
    <van-swipe class="my-swipe"
               show-indicators
               :autoplay="3500"
               indicator-color="#EC0D0D"
               @change="onChange">
      <van-swipe-item v-for="(item,index) in myGoodsList"
                      :key="index"
                      id="Goods">
        <div class="goodsImg">
          <img :src="item.coverImgUrl"
               alt="">
        </div>
        <div>
          <p class="oneLine">{{item.name}}</p>
          <p class="oneLine">配送地址：{{item.address}}</p>
          <p class="oneLine createTime">下单时间：{{item.createTime|timeFormat('YYYY-MM-DD hh:mm:ss')}}</p>
        </div>
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">{{ current + 1 }}/{{myGoodsList.length}}</div>
      </template>
    </van-swipe>
  </div>
  <div v-else>
    <van-empty class="custom-image"
               image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
               description="暂无订单" />
  </div>
</template>

<script>
import { getMyGoods, getGoodsMsg } from "@/api/api";

export default {
  name: "MyGoods",
  filters: {
    timeFormat: function(data, format) {
      let year = (data.getFullYear()).toString().padStart(2, "0")
      let month = (data.getMonth() + 1).toString().padStart(2, "0")
      let day = (data.getDate()).toString().padStart(2, "0")
      let hour = (data.getHours()).toString().padStart(2, "0")
      let minute = (data.getMinutes()).toString().padStart(2, "0")
      let sec = (data.getSeconds()).toString().padStart(2, "0")
      format = format.replace("YYYY", year).replace("MM", month).replace("DD", day).replace("hh", hour).replace("mm", minute).replace("ss", sec)
      return format
    }
  },
  data() {
    return {
      myGoodsList: [],
      current: 0,
    }
  },
  created() {
    this.init()
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    getQuery(url) {
      if (url.includes('?')) {
        let arr = url.split("?")[1].split("&")
        let obj = {}
        arr.forEach(function(val) {
          let jumpBoard = val.split("=")
          obj[jumpBoard[0]] = jumpBoard[1]
        })
        return obj
      }
    },
    init() {
      getMyGoods().then(res => {
        res.data.rows.forEach((element) => {
          if (element.goodsList.includes('?') && (this.getQuery(element.goodsList).id != undefined)) {
            getGoodsMsg(this.getQuery(element.goodsList).id).then(res => {
              this.myGoodsList.push(res.data.data)
              let date = new Date(element.createTime)
              date = new Date(date.getTime() - (13 * 60 * 60 * 1000))
              this.myGoodsList[this.myGoodsList.length - 1].createTime = date
              this.myGoodsList[this.myGoodsList.length - 1].address = element.address
            })
          }
        })
      })
    },
  },
}
</script>

<style scoped lang="less">
.createTime {
  max-width: 85%;
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
/deep/.van-empty__image {
  width: 50px;
  height: 50px;
}
/deep/.van-empty__image img {
  width: 100%;
  height: auto;
}
#outerBox {
  padding: 10px;
  padding-right: 13px;
}
#Goods {
  display: flex;
  justify-content: space-between;

  p {
    font-size: 14px;
  }
  //div{
  > .goodsImg {
    min-width: 75px;
    width: 75px;
    height: 75px;
    //border: 1px solid #ddd;
    > img {
      width: 100%;
      height: 100%;
    }
  }
  > div:nth-child(2) {
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    flex-grow: 1;
    min-width: 0;
    color: #828282;
    //border: 1px solid #ddd;
  }
  //}
}
</style>